<template>
    <div class="box11">
        <h1>停车记录</h1>
        <div class="box1">
            <el-form ref="ruleForm" :model="ruleForm" label-width="80px" size="mini">
                <div class="box1-1">
                    <el-form-item label="停车位">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="车牌号">
                        <el-input v-model="ruleForm.region"></el-input>
                    </el-form-item>


                    <el-form-item label="停车时间">
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1"
                                style="width: 100%;"></el-date-picker>
                        </el-col>
                        <el-col class="line" :span="2">-</el-col>
                        <el-col :span="11">
                            <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;">
                            </el-time-picker>
                        </el-col>
                    </el-form-item>
                </div>

                <div class="box1-1">
                    <el-form-item label="金额">
                        <el-input v-model="ruleForm.resource"></el-input>
                    </el-form-item>

                    <el-form-item label="支付方式">
                        <el-input v-model="ruleForm.desc"></el-input>
                    </el-form-item>


                    <el-form-item size="large">
                        <el-button type="primary" @click="onSubmit">搜索</el-button>
                        <el-button @click="submitForm('ruleForm')">添加</el-button>
                    </el-form-item>
                </div>


            </el-form>
        </div>
        <!-- <div class="box1-2">
            路段地址: <input type="text" style="width:300px">
        </div> -->
    </div>

</template>

<script>
import { addFunApi } from '../../../api/ParkingApi'
export default {
    data() {
        return {
            ruleForm: {
                name: '', //停车位
                region: '', //车牌号
                date1: new Date(),
                date2: new Date(),
                delivery: false,
                type: [],
                resource: '',//金额
                desc: '' //支付方式
            },

        };
    },
    mounted() {
        let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
        this.timer = setInterval(() => {
            _this.ruleForm.date1 = new Date(); // 修改数据date
            _this.ruleForm.date2 = new Date(); // 修改数据date
        }, 1000)
    },
    beforeDestroy() {
        if (this.timer) {
            clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
        }
    },

    methods: {
        onSubmit() { 
            if(!this.ruleForm.region!='') return confirm("请输入车牌号进行搜索！！") 
            this.$emit('parentsearch', this.ruleForm.name != '' ? this.ruleForm.name : this.ruleForm.region)
        },

        submitForm(formName) { //提交按钮
            // console.log(!(this.ruleForm.name && this.ruleForm.region && this.ruleForm.resource && this.ruleForm.desc));
            if (!(this.ruleForm.name && this.ruleForm.region && this.ruleForm.resource && this.ruleForm.desc)) return  confirm("请补全信息！！") 
            this.$refs[formName].validate((valid) => {
                // console.log(this.ruleForm);
                if (valid) {
                    var obj = {
                        id: this.ruleForm.date2,
                      
                        //车牌号
                        username: this.ruleForm.region,
                        //地址
                        // address:,
                        //时间
                        createTime: this.dateFormat(this.ruleForm.date2),
                        // type:Mock.mock('@integer(0, 3)'),// 0充值 1优惠券 2理财服务 3购物一定盈
                        // 停车位
                        income: this.ruleForm.name,
                        //金额
                        pay: this.ruleForm.resource, //支付金额
                        money: this.ruleForm.desc
                    }
                    console.log(obj);
                    this.$emit('resettable', obj)

                } else { //验证不通过
                    console.log('error submit!!');
                    return false;
                }
            })

        },

        //时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
        dateFormat: function (time) {
            var date = new Date(time);
            var year = date.getFullYear();
            /* 在日期格式中，月份是从0开始的，因此要加0
             * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
             * */
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
            var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
            // 拼接
            return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
        }



    }
}
</script>

<style lang="less">
.box11 {
    margin-top: 20px;
    display: block;

    h1 {
        margin-bottom: 20px;
    }

    .box1-1 {
        display: flex;
        text-align: center;
        margin-top: 20px;
    }

    .el-input {
        width: 200px;

        .el-input__inner {
            width: 200px;
        }
    }
}

// .box1-2{
//     float: left;
//     margin-left: 0px;
//     // width: 600px;
// }
</style>